<template>
    <view class="login">
<!--        <view v-if="need_wait">-->
<!--            <MNeedWait></MNeedWait>-->
<!--        </view>-->
        <view class="l-img">
            <image :src="imgUrl"></image>
        </view>
        <view class="l-title">欢迎来到渤海P2C商品贸易中心</view>
        <view class="l-title-1">注册</view>
        <MRegisterInput :type="'account'" :placeholder="'请输入手机号'"  v-model="params.mobile" :maxlength="11"></MRegisterInput>
        <MRegisterInput :type="'authCode'" :placeholder="'请输入验证码'" v-model="params.authCode" :maxlength="4">
            <button class="b-btn" :disabled="btnDis" @tap="handleSendCode()">{{btnText}}</button>
        </MRegisterInput>
        <MRegisterInput :type="'password'" :placeholder="'请输入密码(最少8位,数字+字母)'" v-model="params.newPass"  :maxlength="20"></MRegisterInput>
        <MRegisterInput :type="'password'" :placeholder="'重复密码'" v-model="params.surePass" :maxlength="20"></MRegisterInput>
        <MRegisterInput :type="'text'" :placeholder="invite_show" :disabled="'disabled'"   :maxlength="20"></MRegisterInput>
        <button class="l-btn" @tap="commit()">立即注册</button>
        <view class="check_box">
            <view>
                <van-checkbox class="s-all" shape="square"  :value="ping_checked" checked-color="#333333" @change="handleSelect2">
                </van-checkbox>
            </view>
            <view class="tips_text">
                注册即代表您同意<text @tap="goWatchPrivate()" class="agreement">《用户服务与隐私协议》</text>
            </view>
        </view>
    </view>
</template>

<script>
    // import MInput from '@/components/m-registerInput.vue'
    import MRegisterInput from "@/components/m-registerInput"
    import MNeedWait from '@/components/m-needWait.vue'
    export default {
        name:"register",
        data() {
            return {
                params:{
                    mobile:"",
                    authCode:"",
                    newPass:"",
                    surePass:"",
                    invite_code:'',
                    recommend_user_id:0
                },
                imgUrl:this.$mConfig.assetsPath+"/static/img/bohai_logo.png",
                btnText:"获取验证码",
                btnDis:false,
                t:null,
                ping_checked:false,
                invite_show:'邀请人账号： ',
                need_wait:true

            }
        },
        components:{
            MRegisterInput,
            MNeedWait
        },
      onLoad:function(query){
          if(query && query.invite_code){
              this.params.invite_code=query.invite_code
              // this.invite_show=this.invite_show+this.params.invite_code
              this.getUnionUserInfo()
          }else if(query && query.q){
              let sence=decodeURIComponent(query.q)
              let inviteId=sence.split('invite_code=')[1]
              if(inviteId){
                  this.params.invite_code=inviteId
                  // this.invite_show=this.invite_show+this.params.invite_code
                  this.getUnionUserInfo()
              }
          }

            //
            // query=decodeURIComponent(query)
            // if(query.invite_code!==undefined){
            //     this.params.invite_code=query.invite_code
            //     this.invite_show=this.invite_show+this.params.invite_code
            //     this.getUnionUserInfo()
            // }

        },

        methods: {
            async getUnionUserInfo(){
                let res = await this.$apis.getUnionUserInfo({invite_code:this.params.invite_code});
                if(res.code===0){
                    this.params.recommend_user_id=res.data.id
                    this.invite_show=this.invite_show+res.data.mobile
                }
            },
            async getSessionId(){
                let res = await this.$apis.getSessionId();
                uni.setStorageSync('sessionId', res.data.session_id);
            },
            goWatchAgreement(){ // 查看协议
                this.$router.push({
                    route:this.$routesConfig.registerAgreement,
                })
            },
            goWatchPrivate(){ // 查看隐私协议
                this.$router.push({
                    route:this.$routesConfig.privateAgreement,
                })
            },
            handleSelect2(){ // ping选择单选框
                this.ping_checked=!this.ping_checked
            },
            handleSendCode(){  // 点击发送验证码
                if(this.params.mobile===''){
                    uni.showToast({
                        title: "请输入手机号码",
                        icon: "none",
                    })
                    return
                }
                let reg= /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/
                if(!reg.test(this.params.mobile)){
                    uni.showToast({
                        title: "请输入正确的手机号码",
                        icon: "none",
                    })
                    return
                }
                this.sendMobileCode()

            },
            countDown() {
                this.t = null;
                let timer = 60;
                this.btnDis = true;
                clearInterval(this.t);
                this.btnText = `剩余${timer}s`;
                this.t = setInterval(() => {
                    if (timer == 0) {
                        clearInterval(this.t);
                        this.btnText = "重新发送";
                        this.btnDis = false;
                        return;
                    }
                    timer--;
                    this.btnText = `剩余${timer}s`;
                }, 1000)
            },

            //发送手机验证码
            async sendMobileCode(){
                uni.showLoading({})
                await this.getSessionId()
                let resData=await this.$apis.getMobileCode({mobile:this.params.mobile})
                if(resData.code===0){
                    this.countDown()
                }
                uni.hideLoading()
            },
            async commit(){ //提交信息
                if(this.params.invite_code===''){
                    uni.showToast({
                        title: "没有邀请码，暂不能注册",
                        icon: "none",
                        duration: 3000
                    })
                    return
                }
                if(this.params.mobile==='' || this.params.authCode==='' || this.params.newPass==='' || this.params.surePass===''){
                    uni.showToast({
                        title: "请将信息填写完整",
                        icon: "none",
                    })
                    return
                }
                let reg= /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/
                if(!reg.test(this.params.mobile)){
                    uni.showToast({
                        title: "请输入正确的手机号码",
                        icon: "none",
                    })
                    return
                }
                if(this.params.newPass.length<8){
                    uni.showToast({
                        title: "请设置至少8位的密码",
                        icon: "none",
                    })
                    return
                }
                if(this.params.newPass!==this.params.surePass){
                    uni.showToast({
                        title: "两次输入的密码不一致",
                        icon: "none",
                    })
                    return
                }
                if(!this.ping_checked){
                    uni.showToast({
                        title: "请阅读并同意相关协议",
                        icon: "none",
                    })
                    return
                }
                let resData=await  this.$apis.register({
                    mobile:this.params.mobile,
                    code:this.params.authCode,
                    password:this.params.newPass,
                    rePassword:this.params.surePass,
                    invite_code:this.params.invite_code,
                    recommend_user_id:this.params.recommend_user_id

                })
                if(resData.code===0){
                    uni.showToast({
                        title: "操作成功",
                        icon: "success",
                        duration:3000
                    })
                    setTimeout(()=>{
                        uni.navigateTo({
                            url: '/pages/login/login'
                        })
                    },1500)
                }
            }
        }
    }
</script>
<style>
    .van-checkbox__label{
     color: #0D0D0D !important;
    }
</style>
<style lang="less" scoped>
    .login{
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        background-image: url("https://qiniu.scxhrd.com/static/img/login_bak.png");
        background-size: 100% 100%;
        .l-img{
            width: 100rpx;
            height: 100rpx;
            margin: 80rpx auto 0;
            image{
                width: 100%;
                height: 100%;
                display: block;
                border-radius: 50%;
            }
        }
        .l-title{
            margin-top: 20rpx;
            text-align: center;
            font-size: 42rpx;
            margin-bottom:40rpx
        }
        .l-title-1{
            margin-top: 20rpx;
            text-align: center;
            font-size: 42rpx;
        }
        .l-btn{
            width: 600rpx;
            height: 70rpx;
            /*background:linear-gradient(to top,rgba(236,69,55,1),rgba(251,171,102,1));*/
            background-color:#E7F5FB;
            /*color: #333333;*/
            line-height: 70rpx;
            font-size: 34rpx;
            margin-top: 50rpx;
            color: #333333;

        }
        .l-btn::after{
            border: none;
        }
        .l-forget{
            width: 100%;
            text-align: center;
            margin-top: 20rpx;
            text{
                font-size: 26rpx;
                color: gray;
            }
        }
    }
    .b-btn{
        box-sizing: border-box;
        width: 200rpx;
        height: 60rpx;
        line-height: 60rpx;
        align-self: center;
        color: #ffffff !important;
        font-size: 26rpx;
        padding: 0rpx 20rpx;
        background:linear-gradient(to top,#555555,#555555);
    }
    .check_box{
        margin-left: 60rpx;
        margin-bottom: 30rpx;
        margin-top: 20rpx;
        display: flex;
        flex-direction: row;
        justify-content: left;
    }
    .agreement{
        color: #555555;
    }
    .tips_text{
        margin-left: 20rpx;
    }
</style>
